<style lang="scss" scoped>
  .body{
    width: 90%;
    padding-left: 3%;
  }
.gongg{
  .el-card__body{
    padding: 12px 20px !important;
    overflow: hidden;
    .pull-left{
      cursor: pointer;
      margin-right: 30px;
    }
    .pull-right{
      cursor: pointer;
    }
    i{
      margin-right: 10px;
      color: #999;
    }
    .el-tag--mini{
      line-height: 14px;
      height: 16px;
      margin-left: 4px;
      margin-right: 6px;
    }
  }
  .news:hover{
    color: #F56C6C;
  }
}
.conter{
  width: 100%;
  -moz-column-count:4; /* Firefox */
  -webkit-column-count:4; /* Safari 和 Chrome */
  column-count:5;
  -moz-column-gap: 1em;
  -webkit-column-gap: 1em;
  column-gap: 1em;
  margin-top: 2rem;
}
.item{
  margin: 0 0 1em 0;
  -moz-page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
  border: 1px solid #e5e5e5;
  border-radius: 5px;
}
.item img{
  border-radius: 5px;
  width:100%;
}
</style>
<template>
  <div>
    <div class="body">
      <h1 style="font-size:25px;">图文管理</h1>

      <el-card class="gongg" shadow="never" style="margin-top:30px;">
        <div class="us el-card__body">
          <h3 class="pull-right" >
            <el-button type="primary" @click="goto('/strategyadd')">添加图文</el-button>
          </h3>
          <hr style="width:100%;background-color:#eee;border:none;height:1px;"/>
          <div style="margin-top:1rem;">
            状态：
            <el-tag style="cursor:pointer;"><span @click="selectData(1)">全部</span></el-tag>
            <el-tag type="success" style="cursor:pointer;"><span @click="selectData(2)">已上架</span></el-tag>
            <el-tag type="danger" style="cursor:pointer;"><span @click="selectData(3)">已下架</span></el-tag>
          </div>
          <div v-if="accountData.length<=0" style="color:#999;text-align:center;font-size:20px;padding:3rem;">
            <br/>
            <br/>
            <br/>
            <br/>
            暂无图文数据
          </div>
          <div class="conter">
            <div class="item" v-for="(item,index) in accountData" :key="index">
              <div @click="goto('/strategyupd?id='+item._id)">
                <img :src="item.banner || ''" />
                <p style="padding-left:12px;padding-right:10px;"><b>{{item.title}}</b></p>
                <div style="padding-left:12px;padding-right:10px;">
                  <p style="text-indent: 25px;">{{item.remark}}</p>
                </div>
                <p style="padding-left:12px;padding-right:10px;">
                  发布时间：<span :style="item.deleted==true?'color:red;':'color:green;'">{{item.deleted==true?'已下架':'已上架'}}</span>
                </p>
                <p style="padding-left:12px;padding-right:10px;color:#999;">
                  状态：{{getTime(item.create_at)}}
                </p>
                <p style="padding-left:12px;padding-right:10px;color:#999;font-size:12px;">
                  <i class="fa fa-eye"></i>{{item.visit_count}} &nbsp;&nbsp;
                  <i class="fa fa-thumbs-up"></i>{{item.collect_count}}  &nbsp;&nbsp;
                  <i class="fa fa-commenting"></i>{{item.reply_count}}
                </p>
              </div>
            </div>
          </div>
          <div v-if="accountData.length>0" class="block" style="text-align:center; margin-top:5rem;margin-bottom:10rem;">
            <el-pagination
              background
              @current-change="handleCurrentChange"
              :current-page.sync="page"
              :page-size="size"
              layout="total, prev, pager, next"
              :total="total">
            </el-pagination>
          </div>

        </div>
      </el-card>
      
    </div>
  </div>
</template>

<script>
export default {
  name: "hello",
  data() {
    return {
      total: 0,
      page: 1,
      size: 10,
      accountData: [],
      form:{
        isMe: null,
        deleted: null,
        author: '',
        tab: null,
        page:1,
        size:10
      }
    };
  },
  computed: {
    userInfo(){
      return this.$store.state.admin;
    }
  },
  mounted() {
    this.getData();
  },
   methods: {
    selectData(num){
      if(num==1){
        this.form.deleted = null;
      }else if(num==2){
        this.form.deleted = false;
      }else if(num==3){
        this.form.deleted = true;
      }
      this.form.page = 1;
      this.getData();
    },
    async getData() {
      try {
        let result = await this.$http.post("/article/gets", this.form);
        this.accountData = result.data.result.result;
        this.total = result.data.result.total;
      } catch (error) {
        console.log(error);
      }
      
    },
    getTime(num) {
      let t = new Date(num);
      return (
        t.getFullYear() + 
        "年" +
        (t.getMonth() + 1) + 
        "月" +
        t.getDate() + 
        "日 "+
        t.getHours() +
        ":" +
        t.getMinutes() +
        ":" +
        t.getSeconds()
      );
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getData();
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
